<template>
    <div>
        <Card class="matter">
            <p slot="title"> 事项详情 </p>
            <main>
                <!-- 事项信息 -->
                <div class="matter-box">
                    <h3 class="head-title"> 事项信息 </h3>
                    <Row>
                        <!-- left -->
                        <Col span="8">
                        <section class="workstation_info">
                            <span>发起人：</span>
                            <span> {{matterInfo.from_username}} </span>
                        </section>

                        <section class="workstation_info">
                            <span>当前处理人：</span>
                            <span> {{matterInfo.deal_username}} </span>
                        </section>

                        <section class="workstation_info">
                            <span>事项来源：</span>
                            <span>{{matterInfo.source_zw}}</span>
                        </section>
                        </Col>

                        <!-- right -->
                        <Col span="10" offset="6">
                        <section class="workstation_info">
                            <span>发起时间：</span>
                            <span>{{matterInfo.c_time}}</span>
                        </section>

                        <section class="workstation_info">
                            <span>截止时间：</span>
                            <span>{{matterInfo.out_time}}</span>
                        </section>
                        </Col>
                    </Row>
                </div>

                <!-- 来源信息 -->
                <div class="matter-box">
                    <h3 class="head-title"> {{ matterInfo.source == 1 ? '巡店信息':'协同信息' }} </h3>
                    <Row>
                        <!-- left -->
                        <Col span="8">
                        <section class="workstation_info">
                            <span>{{ matterInfo.source == 1 ? '巡店人：':'发起人：' }}</span>
                            <span> {{sourceInfo.source_username}} </span>
                        </section>

                        <section class="workstation_info">
                            <span>{{ matterInfo.source == 1 ? '巡店时间：':'截止时间：' }}</span>
                            <span> {{ matterInfo.source == 1 ? sourceInfo.source_c_time: sourceInfo.source_out_time }} </span>
                        </section>

                        <section class="workstation_info">
                            <span> {{ matterInfo.source == 1 ? '描述：':'内容：'  }} </span>
                            <span> {{ matterInfo.source == 1 ? sourceInfo.source_describe: sourceInfo.source_content }} </span>
                        </section>
                        </Col>


                        <!-- right -->
                        <Col span="10" offset="6">
                        <section class="workstation_info">
                            <span>{{ matterInfo.source == 1 ? '巡店内容：':'名称：' }}</span>
                            <span> {{ sourceInfo.name }} </span>
                        </section>

                        <section class="workstation_info" v-if="matterInfo.source == 1">
                            <span>是否合格：</span>
                            <span :class="{error: sourceInfo.source_is_qualified == 0 } "> {{ sourceInfo.source_is_qualified == 0 ? '不合格':'合格' }} </span>
                        </section>

                        <section v-if="sourceInfo.source_pic.length" class="workstation_info_pic">
                            <span style="color: #999;font-size: 16px;">拍照：</span>
                            <div @click="clickPic" class="pic_swiper" v-if="sourceInfo.source_pic.length <= 1">
                                <img :src="sourceInfo.source_pic[0]">
                            </div>
                            <div v-else class="pic_swiper" @click="clickPic">
                                <swiper :options="swiperOption">
                                    <swiper-slide v-for="(item, index) in sourceInfo.source_pic" :key="index">
                                        <img :src="item" />
                                    </swiper-slide>
                                </swiper>
                            </div>
                            <span style="display:block; width:100%;text-align:center"> 共 {{sourceInfo.source_pic.length}} 张 </span>
                        </section>

                        <section v-else class="workstation_info_pic">
                            <div>
                                <span style="color: #999;font-size: 16px;">拍照：</span>
                                <img :src="noPic">
                            </div>
                        </section>

                        </Col>
                    </Row>
                </div>

                <!-- 处理动态 -->
                <div class="matter-box">
                    <h3 class="head-title"> 处理动态 </h3>
                    <mySteps :dataInfo="dealInfo" @clickImg="clickImg"></mySteps>
                </div>

            </main>

        </Card>
        <mySwper :isShow="isShow" :caseList="picList" @handleMask="isShow = false"></mySwper>
    </div>
</template>

<script>
    import {
        swiper,
        swiperSlide
    } from 'vue-awesome-swiper'
    import mySwper from '_c/swper/swper'
    import axios from '@/libs/api.request'
    import mySteps from './steps'
    import 'swiper/dist/css/swiper.css'
    export default {
        components: {
            mySteps,
            swiper,
            swiperSlide,
            mySwper
        },
        data() {
            return {
                isShow: false,
                // 图片列表
                picList: [],
                // 事项id
                matterid: '',
                noPic: require('@/assets/images/nopic.jpg'),

                // 轮播图配置
                swiperOption: {
                    loop: true,
                    autoplay: true
                },

                // 事项信息
                matterInfo: {
                    c_time: '',
                    deal_username: '',
                    from_username: '',
                    out_time: '',
                    source_zw: '',
                },
                // 来源信息
                sourceInfo: {
                    name: '',
                    source_c_time: '',
                    source_content: '',
                    source_out_time: '',
                    source_pic: [],
                    source_username: '',

                    source_describe: '',
                    source_is_qualified: 0,
                },

                dealInfo: []
            }
        },
        methods: {
            // 获取事项详情
            getMatterDetail() {

                axios.ajax_post('admin-matter-ajax_get_matter_detail', {
                    matterid: this.matterid
                }).then(res => {
                    if (res.data.code === 1) {
                        this.matterInfo = res.data.data.matter_info
                        this.sourceInfo = res.data.data.source_info
                        this.dealInfo = res.data.data.deal_info
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            },
            // 点击图片
            clickPic() {
                this.picList = this.sourceInfo.source_pic
                this.isShow = true
            },
            // 点击图片
            clickImg(picList) {
                this.picList = picList
                this.isShow = true
            }

        },
        created() {
            this.matterid = this.$route.params.matterid
            this.getMatterDetail()
        }
    }
</script>

<style lang='less' scoped>
    .matter {
        width: 65vw;

        main {
            padding: 40px;

            .workstation_info {
                margin-bottom: 30px;

                .textAre {
                    display: block;
                    padding: 10px;

                }

                span {
                    color: #999;
                    font-size: 16px;

                    &:last-of-type {
                        color: #000;
                        // font-weight: 700;
                    }
                }
            }

            .workstation_info_pic {
                width: 320px;
                height: 180px;


                img {
                    object-fit: contain;
                    display: inline-block;
                    width: 100%;
                    height: 160px;
                }
            }
        }

    }

    .steps {
        margin-left: 30vw;
    }

    .matter-box {
        margin-bottom: 40px;

        .head-title {
            position: relative;
            left: -10px;
            color: #2A7EFB;
            margin-bottom: 20px;
            font-weight: normal;

            &::before {
                position: absolute;
                top: 2px;
                left: -8px;
                content: '';
                width: 5px;
                height: 18px;
                background-color: #2A7EFB;
            }
        }
    }

    .error {
        color: red !important;
    }
</style>